<template>
  <div class="dashboard-container" v-loading="loading">
    <!-- 现代化页面头部 -->
    <div class="dashboard-header">
      <div class="header-content">
        <div class="header-info">
          <h1 class="dashboard-title">管理仪表盘</h1>
        </div>
        <div class="header-actions">
          <div class="time-display">
            <i class="el-icon-time"></i>
            <span>{{ currentTime }}</span>
          </div>
          <el-button
            @click="loadDashboardData"
            :loading="loading"
            icon="el-icon-refresh"
            type="primary"
            size="medium"
            round
          >
        刷新数据
      </el-button>
        </div>
      </div>
    </div>

    <!-- 增强版统计卡片 -->
    <div class="stats-section">
      <el-row :gutter="24" class="stats-row">
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <div class="stat-card students-card" @click="navigateToUsers">
            <div class="card-background">
              <div class="background-pattern"></div>
            </div>
            <div class="card-content">
              <div class="stat-header">
          <div class="stat-icon students">
            <i class="el-icon-user"></i>
          </div>
                <div class="stat-trend">
                  <i class="el-icon-top trend-up"></i>
                  <span class="trend-text">+12%</span>
                </div>
              </div>
              <div class="stat-body">
                <div class="stat-number" :class="{ 'loading': loading }">
                  {{ formatNumber(stats.totalStudents) }}
                </div>
                <div class="stat-label">注册学生</div>
                <div class="stat-description">活跃用户占比 85%</div>
              </div>
          </div>
        </div>
      </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <div class="stat-card tasks-card" @click="navigateToTasks">
            <div class="card-background">
              <div class="background-pattern"></div>
            </div>
            <div class="card-content">
              <div class="stat-header">
          <div class="stat-icon tasks">
            <i class="el-icon-tickets"></i>
          </div>
                <div class="stat-trend">
                  <i class="el-icon-top trend-up"></i>
                  <span class="trend-text">+8%</span>
                </div>
              </div>
              <div class="stat-body">
                <div class="stat-number" :class="{ 'loading': loading }">
                  {{ formatNumber(stats.totalTasks) }}
                </div>
                <div class="stat-label">发布任务</div>
                <div class="stat-description">本月新增 {{ stats.monthlyTasks || 23 }} 个</div>
              </div>
          </div>
        </div>
      </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <div class="stat-card applications-card" @click="navigateToApplications">
            <div class="card-background">
              <div class="background-pattern"></div>
            </div>
            <div class="card-content">
              <div class="stat-header">
                <div class="stat-icon applications">
                  <i class="el-icon-document-checked"></i>
                </div>
                <div class="stat-trend">
                  <i class="el-icon-bottom trend-down"></i>
                  <span class="trend-text">-3%</span>
                </div>
              </div>
              <div class="stat-body">
                <div class="stat-number" :class="{ 'loading': loading }">
                  {{ formatNumber(stats.pendingApplications || 0) }}
                </div>
                <div class="stat-label">待处理申请</div>
                <div class="stat-description">需要及时处理</div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <div class="stat-card schools-card" @click="navigateToSchools">
            <div class="card-background">
              <div class="background-pattern"></div>
            </div>
            <div class="card-content">
              <div class="stat-header">
          <div class="stat-icon schools">
            <i class="el-icon-school"></i>
          </div>
                <div class="stat-trend">
                  <i class="el-icon-top trend-up"></i>
                  <span class="trend-text">+2</span>
                </div>
              </div>
              <div class="stat-body">
                <div class="stat-number" :class="{ 'loading': loading }">
                  {{ formatNumber(stats.totalSchools) }}
                </div>
            <div class="stat-label">合作学校</div>
                <div class="stat-description">覆盖率 95%</div>
              </div>
          </div>
        </div>
      </el-col>
    </el-row>
    </div>

    <!-- 现代化图表区域 -->
    <div class="charts-section">
      <el-row :gutter="24" class="charts-row">
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <div class="chart-card distribution-card">
            <div class="card-header">
              <div class="header-info">
                <h3 class="card-title">
                  <i class="el-icon-pie-chart"></i>
                  任务类型分布
                </h3>
                <p class="card-subtitle">各类型任务占比统计</p>
              </div>
              <div class="header-actions">
                <el-dropdown trigger="click">
                  <el-button size="small" circle icon="el-icon-more"></el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="exportChart('distribution')">导出数据</el-dropdown-item>
                    <el-dropdown-item @click.native="refreshChart('distribution')">刷新图表</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
          </div>
          <div class="chart-container">
            <div v-if="taskDistribution.length === 0" class="chart-placeholder">
                <div class="placeholder-icon">
              <i class="el-icon-pie-chart"></i>
            </div>
                <p class="placeholder-text">暂无任务分布数据</p>
                <el-button type="text" @click="loadDashboardData" size="small">重新加载</el-button>
              </div>
              <div v-else class="distribution-chart">
                <div class="chart-summary">
                  <div class="total-count">
                    <span class="count-number">{{ getTotalTasks() }}</span>
                    <span class="count-label">总任务数</span>
                  </div>
                </div>
                <div class="chart-list">
                  <div
                    v-for="(item, index) in taskDistribution"
                    :key="item.name"
                    class="chart-item"
                    :style="{ animationDelay: (index * 0.1) + 's' }"
                  >
                    <div class="item-info">
                      <div class="chart-item-dot" :style="{ backgroundColor: item.color || getDistributionColor(index) }"></div>
                <span class="chart-item-name">{{ item.name }}</span>
                    </div>
                    <div class="item-stats">
                <span class="chart-item-value">{{ item.value }}</span>
                      <span class="chart-item-percent">{{ getPercentage(item.value) }}%</span>
              </div>
                    <div class="item-bar">
                      <div
                        class="bar-fill"
                        :style="{
                          width: getPercentage(item.value) + '%',
                          backgroundColor: item.color || getDistributionColor(index),
                          animationDelay: (index * 0.1 + 0.3) + 's'
                        }"
                      ></div>
            </div>
          </div>
                </div>
              </div>
            </div>
          </div>
      </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <div class="chart-card activity-card-enhanced">
            <div class="card-header">
              <div class="header-info">
                <h3 class="card-title">
                  <i class="el-icon-data-analysis"></i>
                  用户活跃度
                </h3>
                <p class="card-subtitle">最近7天数据趋势</p>
            </div>
              <div class="header-legends">
              <div class="legend-item">
                <div class="legend-dot new-user-dot"></div>
                <span>新增用户</span>
              </div>
              <div class="legend-item">
                <div class="legend-dot active-user-dot"></div>
                <span>活跃用户</span>
              </div>
            </div>
          </div>
          <div class="chart-container activity-container">
            <div v-if="userActivity.length === 0" class="chart-placeholder">
                <div class="placeholder-icon">
              <i class="el-icon-data-line"></i>
                </div>
                <p class="placeholder-text">暂无用户活跃度数据</p>
                <el-button type="text" @click="loadDashboardData" size="small">重新加载</el-button>
            </div>
            <div v-else class="activity-chart-new">
              <!-- 统计概览 -->
              <div class="activity-summary">
                <div class="summary-item">
                  <div class="summary-value">{{ getTotalNewUsers() }}</div>
                  <div class="summary-label">总新增用户</div>
                </div>
                <div class="summary-item">
                  <div class="summary-value">{{ getTotalActiveUsers() }}</div>
                  <div class="summary-label">总活跃用户</div>
                </div>
                <div class="summary-item">
                  <div class="summary-value">{{ getAverageNewUsers() }}</div>
                  <div class="summary-label">日均新增</div>
                </div>
              </div>

              <!-- 图表区域 -->
              <div class="chart-area">
                <div class="chart-grid">
                  <div v-for="i in 5" :key="i" class="grid-line" :style="{ bottom: (i * 20) + '%' }"></div>
                </div>
                <div class="chart-bars">
                  <div
                    v-for="(item, index) in userActivity"
                    :key="item.date"
                    class="bar-group"
                    :style="{ left: (index * (100 / userActivity.length)) + '%', width: (100 / userActivity.length) + '%' }"
                  >
                    <div class="bar-container">
                      <div
                        class="bar new-user-bar"
                        :style="{
                          height: getBarHeight(item.newUsers) + '%',
                          animationDelay: (index * 0.1) + 's'
                        }"
                        :title="`${item.date}: ${item.newUsers}个新增用户`"
                      ></div>
                      <div
                        class="bar active-user-bar"
                        :style="{
                          height: getBarHeight(item.activeUsers) + '%',
                          animationDelay: (index * 0.1 + 0.05) + 's'
                        }"
                        :title="`${item.date}: ${item.activeUsers}个活跃用户`"
                      ></div>
                    </div>
                    <div class="bar-label">{{ item.date }}</div>
                    <div class="bar-values">
                      <span class="new-value">{{ item.newUsers }}</span>
                      <span class="active-value">{{ item.activeUsers }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          </div>
      </el-col>
    </el-row>
    </div>

    <!-- 现代化活动区域 -->
    <div class="activity-section">
      <el-row :gutter="24" class="activity-row">
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <div class="activity-card recent-tasks-card">
            <div class="card-header">
              <div class="header-info">
                <h3 class="card-title">
                  <i class="el-icon-tickets"></i>
                  最近任务
                </h3>
                <p class="card-subtitle">最新发布的任务动态</p>
          </div>
              <div class="header-actions">
                <el-button type="text" @click="viewAllTasks" size="small">
                  查看全部
                  <i class="el-icon-arrow-right"></i>
                </el-button>
              </div>
            </div>
            <div class="activity-content">
              <div v-if="recentTasks.length === 0" class="empty-state">
                <div class="empty-icon">
                  <i class="el-icon-document-copy"></i>
                </div>
                <p class="empty-text">暂无最近任务</p>
              </div>
              <div v-else class="activity-list">
                <div
                  v-for="(task, index) in recentTasks"
                  :key="task.id"
                  class="activity-item modern-item"
                  :style="{ animationDelay: (index * 0.1) + 's' }"
                  @click="navigateToTaskDetail(task.id)"
                >
                  <div class="item-left">
                    <div class="activity-icon" :class="getTaskIconClass(task.type)">
                <i :class="getTaskIcon(task.type)"></i>
              </div>
              <div class="activity-content">
                <div class="activity-title">{{ task.title }}</div>
                <div class="activity-meta">
                  <span class="activity-type">{{ getTaskTypeName(task.type) }}</span>
                        <span class="activity-separator">•</span>
                  <span class="activity-time">{{ formatTime(task.createdAt) }}</span>
                </div>
              </div>
                  </div>
                  <div class="item-right">
                    <el-tag :type="getStatusType(task.status)" size="small" class="modern-tag">
                  {{ getStatusName(task.status) }}
                </el-tag>
                    <div class="item-arrow">
                      <i class="el-icon-arrow-right"></i>
              </div>
            </div>
          </div>
              </div>
            </div>
          </div>
      </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <div class="activity-card notifications-card">
            <div class="card-header">
              <div class="header-info">
                <h3 class="card-title">
                  <i class="el-icon-bell"></i>
                  系统通知
                  <span v-if="getUnreadCount() > 0" class="notification-badge">{{ getUnreadCount() }}</span>
                </h3>
                <p class="card-subtitle">重要消息和系统提醒</p>
          </div>
              <div class="header-actions">
                <el-button type="text" @click="viewAllNotifications" size="small">
                  查看全部
                  <i class="el-icon-arrow-right"></i>
                </el-button>
              </div>
            </div>
            <div class="activity-content">
              <div v-if="notifications.length === 0" class="empty-state">
                <div class="empty-icon">
                  <i class="el-icon-bell"></i>
                </div>
                <p class="empty-text">暂无系统通知</p>
              </div>
              <div v-else class="activity-list">
                <div
                  v-for="(notification, index) in notifications"
                  :key="notification.id"
                  class="activity-item modern-item notification-item"
                  :class="{ 'unread': !notification.isRead }"
                  :style="{ animationDelay: (index * 0.1) + 's' }"
                  @click="handleNotificationClick(notification)"
                >
                  <div class="item-left">
                    <div class="activity-icon notification-icon" :class="{ 'unread': !notification.isRead }">
                <i class="el-icon-bell"></i>
              </div>
              <div class="activity-content">
                <div class="activity-title">{{ notification.title }}</div>
                <div class="activity-meta">
                  <span class="activity-time">{{ formatTime(notification.createdAt) }}</span>
                </div>
              </div>
              </div>
                  <div class="item-right">
                    <div class="read-indicator" :class="{ 'unread': !notification.isRead }">
                      <div class="read-dot"></div>
            </div>
                    <div class="item-arrow">
                      <i class="el-icon-arrow-right"></i>
          </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
      </el-col>
    </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "AdminDashboard",
  data() {
    return {
      loading: false,
      currentTime: '',
      stats: {
        totalStudents: 0,
        totalTasks: 0,
        totalSchools: 0,
        pendingApplications: 0,
        monthlyTasks: 0
      },
      recentTasks: [],
      notifications: [],
      taskDistribution: [],
      userActivity: []
    }
  },
  async created() {
    this.updateCurrentTime()
    this.startTimeUpdate()
    await this.loadDashboardData()
  },

  async activated() {
    // 页面激活时刷新数据
    await this.loadDashboardData()
  },

  beforeDestroy() {
    if (this.timeInterval) {
      clearInterval(this.timeInterval)
    }
  },
  methods: {
    async loadDashboardData() {
      this.loading = true
      try {
        // 并行加载所有数据
        const [statsResponse, tasksResponse, notificationsResponse, distributionResponse, activityResponse] = await Promise.all([
          this.$http.get("/admin/dashboard/stats").catch(err => {
            console.warn("获取统计数据失败:", err)
            return { data: { code: 500 } }
          }),
          this.$http.get("/admin/dashboard/recent-tasks", { params: { limit: 5 } }).catch(err => {
            console.warn("获取最近任务失败:", err)
            return { data: { code: 500 } }
          }),
          this.$http.get("/admin/dashboard/notifications", { params: { limit: 5 } }).catch(err => {
            console.warn("获取通知失败:", err)
            return { data: { code: 500 } }
          }),
          this.$http.get("/admin/dashboard/task-distribution").catch(err => {
            console.warn("获取任务分布失败:", err)
            return { data: { code: 500 } }
          }),
          this.$http.get("/admin/dashboard/user-activity", { params: { days: 7 } }).catch(err => {
            console.warn("获取用户活跃度失败:", err)
            return { data: { code: 500 } }
          })
        ])

        // 处理统计数据
        if (statsResponse.data.code === 200) {
          this.stats = {
            totalStudents: statsResponse.data.data.totalStudents || 0,
            totalTasks: statsResponse.data.data.totalTasks || 0,
            pendingApplications: statsResponse.data.data.pendingApplications || 0,
            totalSchools: statsResponse.data.data.totalSchools || 0
          }
        } else {
          this.stats = { totalStudents: 0, totalTasks: 0, pendingApplications: 0, totalSchools: 0 }
        }

        // 处理最近任务
        if (tasksResponse.data.code === 200) {
          this.recentTasks = (tasksResponse.data.data || []).map(task => ({
            ...task,
            createdAt: new Date(task.createdAt)
          }))
        } else {
          this.recentTasks = []
        }

        // 处理系统通知
        if (notificationsResponse.data.code === 200) {
          this.notifications = (notificationsResponse.data.data || []).map(notification => ({
            ...notification,
            createdAt: new Date(notification.createdAt)
          }))
        } else {
          this.notifications = []
        }

        // 处理任务分布数据
        if (distributionResponse.data.code === 200) {
          this.taskDistribution = distributionResponse.data.data || []
        } else {
          this.taskDistribution = []
        }

        // 如果没有分布数据，生成模拟数据
        if (this.taskDistribution.length === 0) {
          this.generateMockTaskDistribution()
        }

        // 处理用户活跃度数据
        if (activityResponse.data.code === 200) {
          this.userActivity = activityResponse.data.data || []
        } else {
          this.userActivity = []
        }

        // 如果没有数据，生成模拟数据
        if (this.userActivity.length === 0) {
          this.generateMockUserActivity()
        }

        console.log("仪表盘数据加载成功", {
          stats: this.stats,
          recentTasks: this.recentTasks.length,
          notifications: this.notifications.length,
          taskDistribution: this.taskDistribution.length,
          userActivity: this.userActivity.length
        })

      } catch (error) {
        console.error("加载仪表盘数据失败:", error)
        this.$message.warning("部分数据加载失败，已使用默认数据")
        this.loadMockData()
      } finally {
        this.loading = false
      }
    },

    loadMockData() {
      this.stats = {
        totalStudents: 1250,
        totalTasks: 89,
        pendingApplications: 12,
        totalSchools: 8
      }

      this.recentTasks = [
        {
          id: 1,
          title: "图书馆兼职工作",
          type: "labor",
          status: "published",
          createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000)
        },
        {
          id: 2,
          title: "代取快递服务",
          type: "express",
          status: "completed",
          createdAt: new Date(Date.now() - 4 * 60 * 60 * 1000)
        },
        {
          id: 3,
          title: "代课服务",
          type: "substitute",
          status: "in_progress",
          createdAt: new Date(Date.now() - 6 * 60 * 60 * 1000)
        }
      ]

      this.notifications = [
        {
          id: 1,
          title: "新用户注册通知",
          isRead: false,
          createdAt: new Date(Date.now() - 30 * 60 * 1000)
        },
        {
          id: 2,
          title: "系统维护通知",
          isRead: true,
          createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000)
        }
      ]

      this.generateMockUserActivity()
      this.generateMockTaskDistribution()
    },

    generateMockUserActivity() {
      // 生成最近7天的模拟数据
      this.userActivity = []
      const today = new Date()

      for (let i = 6; i >= 0; i--) {
        const date = new Date(today)
        date.setDate(date.getDate() - i)

        this.userActivity.push({
          date: `${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`,
          newUsers: Math.floor(Math.random() * 15) + 2, // 2-16个新用户
          activeUsers: Math.floor(Math.random() * 35) + 15 // 15-49个活跃用户
        })
      }
    },

    generateMockTaskDistribution() {
      this.taskDistribution = [
        { name: '劳务任务', value: 45, color: '#409eff' },
        { name: '跑腿任务', value: 28, color: '#67c23a' },
        { name: '代课任务', value: 12, color: '#e6a23c' },
        { name: '快递任务', value: 18, color: '#f56c6c' }
      ]
    },

    getTaskIcon(type) {
      const iconMap = {
        labor: "el-icon-briefcase",
        errand: "el-icon-shopping-cart-2",
        substitute: "el-icon-reading",
        express: "el-icon-truck"
      }
      return iconMap[type] || "el-icon-tickets"
    },

    getTaskTypeName(type) {
      const typeMap = {
        labor: "劳务任务",
        errand: "跑腿任务",
        substitute: "代课任务",
        express: "快递任务"
      }
      return typeMap[type] || "劳务任务"
    },

    getStatusType(status) {
      const statusMap = {
        draft: "info",
        recruiting: "success",
        published: "success",
        in_progress: "warning",
        completed: "success",
        cancelled: "danger",
        filled: "info"
      }
      return statusMap[status] || "info"
    },

    getStatusName(status) {
      const statusMap = {
        draft: "草稿",
        recruiting: "招募中",
        published: "已发布",
        in_progress: "进行中",
        completed: "已完成",
        cancelled: "已取消",
        filled: "已满员"
      }
      return statusMap[status] || "未知状态"
    },

    formatTime(time) {
      const now = new Date()
      const diff = now - new Date(time)
      const minutes = Math.floor(diff / (1000 * 60))
      const hours = Math.floor(diff / (1000 * 60 * 60))
      const days = Math.floor(diff / (1000 * 60 * 60 * 24))

      if (minutes < 60) {
        return `${minutes}分钟前`
      } else if (hours < 24) {
        return `${hours}小时前`
      } else {
        return `${days}天前`
      }
    },

    viewAllTasks() {
      this.$router.push("/admin/labors")
    },

    viewAllNotifications() {
      this.$message.info("通知管理功能开发中")
    },

    // 用户活跃度相关方法
    getTotalNewUsers() {
      return this.userActivity.reduce((total, item) => total + (item.newUsers || 0), 0)
    },

    getTotalActiveUsers() {
      return this.userActivity.reduce((total, item) => total + (item.activeUsers || 0), 0)
    },

    getAverageNewUsers() {
      if (this.userActivity.length === 0) return 0
      return Math.round(this.getTotalNewUsers() / this.userActivity.length)
    },

    getBarHeight(value) {
      if (!value || value === 0) return 2 // 最小高度2%，确保可见
      if (this.userActivity.length === 0) return 2

      // 获取所有数据的最大值
      const allValues = this.userActivity.flatMap(item => [item.newUsers || 0, item.activeUsers || 0])
      const maxValue = Math.max(...allValues, 1) // 至少为1，避免除零

      // 计算百分比，最小高度为5%，最大高度为90%
      const percentage = (value / maxValue) * 85 + 5
      return Math.min(Math.max(percentage, 5), 90)
    },

    // 新增的方法
    updateCurrentTime() {
      const now = new Date()
      this.currentTime = now.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    },

    startTimeUpdate() {
      this.timeInterval = setInterval(() => {
        this.updateCurrentTime()
      }, 60000) // 每分钟更新一次
    },

    formatNumber(num) {
      if (num === undefined || num === null) return '0'
      return num.toLocaleString()
    },

    // 导航方法
    navigateToUsers() {
      this.$router.push('/admin/students')
    },

    navigateToTasks() {
      this.$router.push('/admin/labors')
    },

    navigateToApplications() {
      this.$router.push('/admin/applications')
    },

    navigateToSchools() {
      this.$router.push('/admin/schools')
    },

    navigateToTaskDetail(taskId) {
      this.$router.push(`/admin/labors/${taskId}`)
    },

    // 图表相关方法
    getTotalTasks() {
      return this.taskDistribution.reduce((total, item) => total + (item.value || 0), 0)
    },

    getPercentage(value) {
      const total = this.getTotalTasks()
      if (total === 0) return 0
      return Math.round((value / total) * 100)
    },

    getDistributionColor(index) {
      const colors = ['#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399', '#c71585']
      return colors[index % colors.length]
    },

    exportChart(type) {
      this.$message.info(`导出${type}图表数据功能开发中`)
    },

    refreshChart(type) {
      this.$message.success(`刷新${type}图表成功`)
      this.loadDashboardData()
    },

    // 任务图标类名
    getTaskIconClass(type) {
      const classMap = {
        labor: 'labor-icon',
        errand: 'errand-icon',
        substitute: 'substitute-icon',
        express: 'express-icon'
      }
      return classMap[type] || 'default-icon'
    },

    // 通知相关方法
    getUnreadCount() {
      return this.notifications.filter(n => !n.isRead).length
    },

    handleNotificationClick(notification) {
      // 标记为已读
      notification.isRead = true
      this.$message.info(`查看通知: ${notification.title}`)
    }
  }
}
</script>

<style scoped>
/* 现代化仪表盘样式 */
.dashboard-container {
  padding: 0;
  background-color: #f8fafc;
  min-height: 100vh;
  height: auto;
  overflow: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 页面头部 */
.dashboard-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 24px 32px;
  margin: -20px -20px 32px -20px;
  border-radius: 0 0 16px 16px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.header-info {
  flex: 1;
}

.dashboard-title {
  margin: 0 0 8px 0;
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(135deg, #fff 0%, #e0e7ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dashboard-subtitle {
  margin: 0;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.time-display {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

.time-display i {
  font-size: 16px;
}

/* 统计卡片区域 */
.stats-section {
  margin-bottom: 32px;
}

.stats-row {
  margin-bottom: 0;
}

.stat-card {
  position: relative;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  min-height: 160px;
  height: auto;
  margin-bottom: 24px;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.card-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.05;
  overflow: hidden;
}

.background-pattern {
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, currentColor 1px, transparent 1px);
  background-size: 20px 20px;
  animation: float 20s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(-10px, -10px) rotate(1deg); }
  66% { transform: translate(10px, -5px) rotate(-1deg); }
}

.card-content {
  position: relative;
  padding: 20px;
  min-height: 120px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
}

.stat-icon.students {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.tasks {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-icon.applications {
  background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
  color: #2d3436;
}

.stat-icon.schools {
  background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.trend-up {
  background: rgba(103, 194, 58, 0.1);
  color: #67c23a;
}

.trend-down {
  background: rgba(245, 108, 108, 0.1);
  color: #f56c6c;
}

.trend-text {
  font-size: 11px;
}

.stat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 60px;
}

.stat-number {
  font-size: 28px;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 6px;
  line-height: 1.2;
  transition: all 0.3s ease;
  white-space: nowrap;
  overflow: visible;
}

.stat-number.loading {
  opacity: 0.6;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.stat-label {
  font-size: 14px;
  font-weight: 600;
  color: #4a5568;
  margin-bottom: 4px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: visible;
}

.stat-description {
  font-size: 12px;
  color: #718096;
  line-height: 1.4;
  white-space: nowrap;
  overflow: visible;
}

/* 图表区域 */
.charts-section {
  margin-bottom: 32px;
}

.charts-row {
  margin-bottom: 0;
}

.chart-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  min-height: 400px;
  height: auto;
  margin-bottom: 24px;
}

.card-header {
  padding: 24px 24px 16px 24px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.header-info {
  flex: 1;
}

.card-title {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1a202c;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-title i {
  color: #667eea;
  font-size: 16px;
}

.card-subtitle {
  margin: 0;
  font-size: 14px;
  color: #64748b;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-legends {
  display: flex;
  gap: 16px;
}

.chart-container {
  padding: 24px;
  min-height: 300px;
  height: auto;
}

.chart-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #94a3b8;
}

.placeholder-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.placeholder-icon i {
  font-size: 28px;
  color: #cbd5e1;
}

.placeholder-text {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #64748b;
}

/* 分布图表样式 */
.distribution-chart {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chart-summary {
  text-align: center;
  margin-bottom: 24px;
}

.total-count {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.count-number {
  font-size: 36px;
  font-weight: 700;
  color: #1a202c;
  line-height: 1;
}

.count-label {
  font-size: 14px;
  color: #64748b;
  margin-top: 4px;
}

.chart-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chart-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
  transition: all 0.3s ease;
  animation: slideInUp 0.6s ease forwards;
  opacity: 0;
  transform: translateY(20px);
}

@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chart-item:hover {
  background: #e2e8f0;
  transform: translateY(-2px);
}

.item-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chart-item-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.chart-item-name {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  flex: 1;
}

.item-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-item-value {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.chart-item-percent {
  font-size: 12px;
  color: #6b7280;
  background: #e5e7eb;
  padding: 2px 6px;
  border-radius: 4px;
}

.item-bar {
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.8s ease;
  animation: expandWidth 1s ease forwards;
  width: 0 !important;
}

@keyframes expandWidth {
  to {
    width: var(--target-width) !important;
  }
}

/* 任务分布图表 */
.chart-list {
  padding: 10px 0;
}

.chart-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.chart-item:last-child {
  border-bottom: none;
}

.chart-item-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 12px;
}

.chart-item-name {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.chart-item-value {
  font-weight: bold;
  color: #409eff;
}

/* 用户活跃度增强卡片 */
.activity-card-enhanced {
  min-height: 400px;
  height: auto;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}

.header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.card-subtitle {
  font-size: 12px;
  color: #909399;
}

.header-right {
  display: flex;
  gap: 16px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #606266;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.new-user-dot {
  background: #67c23a;
}

.active-user-dot {
  background: #409eff;
}

.activity-container {
  min-height: 320px;
  height: auto;
  padding: 16px 0;
}

.activity-chart-new {
  min-height: 250px;
  height: auto;
  display: flex;
  flex-direction: column;
}

/* 统计概览 */
.activity-summary {
  display: flex;
  justify-content: space-around;
  padding: 12px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.summary-item {
  text-align: center;
}

.summary-value {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.summary-label {
  font-size: 12px;
  color: #909399;
}

/* 图表区域 */
.chart-area {
  flex: 1;
  position: relative;
  margin: 0 16px;
  min-height: 180px;
  height: 180px;
}

.chart-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 40px;
  z-index: 1;
}

.grid-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: #f5f5f5;
}

.chart-bars {
  position: relative;
  height: 100%;
  padding-bottom: 50px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding-left: 10px;
  padding-right: 10px;
}

.bar-group {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 80px;
  margin: 0 5px;
}

.bar-container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 100px;
  margin-bottom: 8px;
  width: 100%;
}

.bar {
  width: 16px;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  transition: all 0.3s ease;
  animation: slideUp 0.6s ease forwards;
  transform: scaleY(0);
  transform-origin: bottom;
  cursor: pointer;
  position: relative;
}

@keyframes slideUp {
  to {
    transform: scaleY(1);
  }
}

.bar:hover {
  opacity: 0.8;
  transform: scaleY(1.05);
}

.new-user-bar {
  background: linear-gradient(to top, #67c23a, #85ce61);
}

.active-user-bar {
  background: linear-gradient(to top, #409eff, #66b1ff);
}

.bar-label {
  font-size: 11px;
  color: #909399;
  margin-bottom: 6px;
  text-align: center;
  white-space: nowrap;
  font-weight: 500;
}

.bar-values {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.new-value,
.active-value {
  font-size: 10px;
  font-weight: 500;
  padding: 1px 4px;
  border-radius: 2px;
}

.new-value {
  color: #67c23a;
  background: rgba(103, 194, 58, 0.1);
}

.active-value {
  color: #409eff;
  background: rgba(64, 158, 255, 0.1);
}

/* 活动区域 */
.activity-section {
  margin-bottom: 32px;
}

.activity-row {
  margin-bottom: 0;
}

.activity-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  min-height: 400px;
  height: auto;
  margin-bottom: 24px;
}

.activity-content {
  padding: 0 24px 24px 24px;
  min-height: 300px;
  height: auto;
  display: flex;
  flex-direction: column;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #94a3b8;
}

.empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.empty-icon i {
  font-size: 28px;
  color: #cbd5e1;
}

.empty-text {
  margin: 0;
  font-size: 16px;
  color: #64748b;
}

.activity-list {
  flex: 1;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 8px;
}

.activity-list::-webkit-scrollbar {
  width: 4px;
}

.activity-list::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 2px;
}

.activity-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 2px;
}

.activity-list::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.modern-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  margin-bottom: 12px;
  background: #f8fafc;
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
  animation: slideInUp 0.6s ease forwards;
  opacity: 0;
  transform: translateY(20px);
  border: 1px solid transparent;
}

.modern-item:hover {
  background: white;
  border-color: #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

.item-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.activity-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: white;
  flex-shrink: 0;
}

.activity-icon.labor-icon {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.activity-icon.errand-icon {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

.activity-icon.substitute-icon {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.activity-icon.express-icon {
  background: linear-gradient(135deg, #43e97b, #38f9d7);
}

.activity-icon.default-icon {
  background: linear-gradient(135deg, #a8edea, #fed6e3);
  color: #374151;
}

.activity-icon.notification-icon {
  background: linear-gradient(135deg, #ffeaa7, #fab1a0);
  color: #2d3436;
}

.activity-icon.notification-icon.unread {
  background: linear-gradient(135deg, #fd79a8, #fdcb6e);
  animation: pulse 2s infinite;
}

.activity-content {
  flex: 1;
  min-width: 0;
}

.activity-title {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-meta {
  font-size: 13px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 8px;
}

.activity-type {
  font-weight: 500;
}

.activity-separator {
  color: #d1d5db;
}

.activity-time {
  color: #9ca3af;
}

.item-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.modern-tag {
  font-weight: 500;
  border: none;
}

.item-arrow {
  color: #cbd5e1;
  transition: all 0.3s ease;
}

.modern-item:hover .item-arrow {
  color: #667eea;
  transform: translateX(2px);
}

/* 通知相关样式 */
.notification-badge {
  background: #ef4444;
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 8px;
  min-width: 16px;
  text-align: center;
}

.notification-item.unread {
  background: #fef3c7;
  border-color: #fbbf24;
}

.read-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.read-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d1d5db;
  transition: all 0.3s ease;
}

.read-indicator.unread .read-dot {
  background: #3b82f6;
  animation: pulse 2s infinite;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .header-content {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .header-actions {
    justify-content: space-between;
  }

  .chart-card,
  .activity-card {
    height: auto;
    min-height: 300px;
  }

  .chart-container,
  .activity-content {
    min-height: 250px;
    height: auto;
  }
}

@media (max-width: 768px) {
  .dashboard-header {
    margin: -20px -10px 20px -10px;
    padding: 20px 16px;
  }

  .dashboard-title {
    font-size: 24px;
  }

  .time-display {
    display: none;
  }

  .stat-card {
    min-height: 140px;
    height: auto;
    margin-bottom: 16px;
  }

  .card-content {
    padding: 16px;
    gap: 8px;
  }

  .stat-number {
    font-size: 24px;
    line-height: 1.1;
  }

  .stat-label {
    font-size: 13px;
  }

  .card-header {
    padding: 16px;
  }

  .chart-container {
    padding: 16px;
    min-height: 200px;
  }

  .activity-content {
    padding: 0 16px 16px 16px;
    min-height: 200px;
  }

  .modern-item {
    padding: 12px;
  }

  .activity-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .dashboard-container {
    background-color: white;
  }

  .stats-section,
  .charts-section,
  .activity-section {
    margin-bottom: 20px;
  }

  .stat-card {
    min-height: 120px;
    height: auto;
  }

  .card-content {
    padding: 14px;
    gap: 6px;
  }

  .stat-number {
    font-size: 20px;
    line-height: 1.1;
  }

  .stat-label {
    font-size: 12px;
    line-height: 1.2;
  }

  .stat-description {
    font-size: 11px;
  }

  .header-legends {
    display: none;
  }

  .modern-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .item-right {
    align-self: flex-end;
  }
}
</style>
